<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="homeContainer mat-app-background">

  <!-- Toolbar -->
  <div class="toolbar">
    <mat-toolbar>
      <div>
        <h1> qBittorrent </h1>
      </div>

      <app-search-torrents></app-search-torrents>

      <div class="actions">
        <div id="toolbar_actions">
          <button mat-fab matTooltip="Add Torrent" id="addTorrentFAB" color="warn" (click)="openAddTorrentDialog()">
            <mat-icon>cloud_upload</mat-icon>
          </button>

          <button class="hide_mobile" mat-raised-button id="addTorrentButton" color="warn" (click)="openAddTorrentDialog()">
            <mat-icon>cloud_upload</mat-icon>
            &nbsp; Upload
          </button>

          <button disableRipple class="mat-elevation-z1" color="default" mat-fab [matMenuTriggerFor]="menu">
            <mat-icon>person</mat-icon>
          </button>

          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="openSettingsDialog()">
              <mat-icon>settings</mat-icon>
              <span>Settings</span>
            </button>

            <button mat-menu-item (click)="$event.stopPropagation();handleSlideToggle()">
              <mat-icon>brightness_6</mat-icon>
              Dark Theme &nbsp;
              <mat-slide-toggle id="slideToggleTheme" (click)="false" (change)="false" [checked]="isDarkThemeEnabled()" color="primary">
              </mat-slide-toggle>
            </button>

            <button mat-menu-item id="logoutButton" color="default" (click)="logout()">
              <mat-icon>exit_to_app</mat-icon>
              <span>Logout</span>
            </button>
          </mat-menu>

        </div>
      </div>

    </mat-toolbar>
  </div>

  <!-- Main Content -->
  <div class="content" role="main">
    <app-torrents-table></app-torrents-table>
    <app-global-transfer-info></app-global-transfer-info>
  </div>
</div>
